.pgv-stages-graph {
  --card-background: color-mix(
    in srgb,
    var(--text-color-secondary) 4%,
    var(--background)
  );
  position: relative;
  background: var(--card-background);
  border: var(--jenkins-border);
  border-radius: var(--form-input-border-radius);
  overflow: hidden;
  height: 100%;

  &--left {
    --additional-height: 0px;
    position: sticky;
    top: calc(var(--pgv-header-height) + var(--section-padding));
    height: calc(
      (100vh + var(--additional-height)) -
        (var(--pgv-header-height) + 100px + var(--section-padding))
    );
    max-height: calc(
      100vh -
        (
          var(--pgv-header-height) + var(--section-padding) +
            var(--section-padding)
        )
    );
  }

  &--dialog {
    position: fixed;
    inset: 0 !important;
    z-index: 30000;
    border-radius: 0;
    border: none;
    height: unset;
    max-height: unset;

    .pgv-stages-graph__controls {
      margin: 1rem;
      color: var(--text-color);
    }

    .jenkins-button svg {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  &__heading {
    padding: 0 0.55rem;
    bottom: unset !important;
    right: unset !important;
    line-height: 2rem;
    font-weight: var(--font-bold-weight);
    font-size: var(--font-size-sm);
  }
}

// Hacky method of getting the full screen graph to
// overlay the header and scroll up/down controls
#page-body:has(.pgv-stages-graph--dialog) {
  z-index: 1001;

  .pgv-split-view__container {
    z-index: 1001;
  }
}

.pgv-stages-graph__controls {
  position: absolute;
  inset: 0.1rem;
  display: flex;
  z-index: 1;
  backdrop-filter: blur(10px);
  background: red;
  border-radius: 0.45rem;
  align-items: center;
  color: var(--text-color-secondary);
  background: color-mix(in srgb, var(--card-background) 80%, transparent);
  border: var(--jenkins-border-width) solid transparent;
  background-clip: padding-box;
}
